<template>
    <view class="screen-box">
        <view class="screen">
            <view class="flex-column-center" @click="
                showType = 'area';
            overlay_show = true;
            "><text class="mr-12 fs-30" :class="{ 'text-active': overlay_show && showType == 'area' }">区域</text>
                <block>
                    <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12"
                        v-if="overlay_show && showType == 'area'">
                    </image>
                    <image src="/static/svg/arrow-down.svg" class="w-20 h-12" v-else></image>
                </block>
            </view>
        </view>
        <view class="popup" v-if="overlay_show">
            <AreaScreen v-if="showType === 'area'" :list="areaData" :checkIds="areaCheckIds"
                @changeCheck="areaChangeCheck">
            </AreaScreen>
            <view class="popup-btns">
                <u-button :customStyle="btnStyle" @click="onReast">重置</u-button>
                <u-button :customStyle="{ ...btnStyle, background: '#C5261D', color: '#fff' }"
                    @click="onSubmit">确定</u-button>
            </view>
        </view>
    </view>
</template>
<script>
import AreaScreen from "@/components/AreaScreen.vue";
import { areaListApi } from "@/services/common";
export default {
    data() {
        return {
            showType: "area",
            overlay_show: false,
            btnStyle: {
                width: "328rpx",
                height: "80rpx",
                borderRadius: "12rpx",
                background: "#F7F8FA",
                border: "none",
            },
            areaData: [],
            areaCheckIds: [],
            cateCheckIds: [],
            brandCheckIds: [],
            priceCheckIds: [],
            moreCheckIds: [],
            priceSort: "", // '' = default, 'asc' = 升序, 'desc' = 降序
            viewsSort: ''
        };
    },
    props: {
        cate: String,
    },
    watch: {
        overlay_show(val) {
            this.$emit("overlay_show", val);
        },
        cate() {
            this.getTagList();
        },
    },
    components: { AreaScreen },
    mounted() {
        areaListApi().then((res) => {
            this.areaData = res.data?.area_list || [];
        });
    },
    computed: {
        getPriceSortIcon() {
            if (this.priceSort === "asc") {
                return "/static/svg/arrow-up-active.svg";
            } else if (this.priceSort === "desc") {
                return "/static/svg/arrow-down-active.svg";
            }
            return "/static/svg/arrow-down.svg";
        },
    },
    methods: {
        //手动设置公寓条件
        setApartment() {
            this.moreCheckIds = [{ key: "kinds", ids: ["公寓"] }];
            this.onSubmit();
        },
        getTagList() {
            tagsListApi({ cate: Number(this.cate) }).then((res) => {
                this.moreList[this.moreList.length - 1].list = res.data || [];
            });
        },
        areaChangeCheck(e, names) {
            this.areaCheckIds = e;
            console.log(names);
            // this.areaNames = names;
        },
        priceChangeCheck(e) {
            this.priceCheckIds = e;
        },
        cateChangeCheck(e) {
            this.cateCheckIds = e;
        },
        brandChangeCheck(e) {
            this.brandCheckIds = e;
        },
        moreChangeCheck(e) {
            this.moreCheckIds = this.moreCheckIds.filter(
                (item) => item.key !== e.key
            );
            this.moreCheckIds.push(e);
        },
        onReast() {
            this.areaCheckIds = [];
            this.priceCheckIds = [];
            this.moreCheckIds = [];
            this.priceSort = "";
            this.$emit("onReast");
            this.overlay_show = false;
        },
        onSubmit() {
            this.$emit("onSearch", {
                area: this.areaCheckIds,
                price: this.priceSort,
                views: this.viewsSort,
            });
            this.overlay_show = false;
        },
        handleSort(type) {
            const sortKey = type + 'Sort';

            // 循环切换排序状态: 默认 -> 升序 -> 降序 -> 默认
            if (this[sortKey] === "") {
                this[sortKey] = "asc";
            } else if (this[sortKey] === "asc") {
                this[sortKey] = "desc";
            } else {
                this[sortKey] = "";
            }

            // 重置其他排序
            if (type === 'price') {
                this.viewsSort = '';
            } else if (type === 'views') {
                this.priceSort = '';
            }

            // 关闭弹窗
            this.overlay_show = false;

            // 触发搜索
            this.$emit("onSearch", {
                area: this.areaCheckIds,
                [type]: this[sortKey],
                more: this.moreCheckIds,
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.screen-box {
    position: relative;
}

.screen {
    height: 80rpx;
    background: #ffffff;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text-active {
        color: $theme-color;
    }
}

.popup {
    z-index: 90999;
    position: absolute;
    top: 80rpx;
    left: 0;
    right: 0;
    // min-height: 500rpx;
    background: #ffffff;

    .popup-btns {
        height: 136rpx;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.price-arrows {
    display: flex;
    flex-direction: column;
    gap: 2rpx;
}
</style>